<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!-- 1.画图形
		     2.画正三角形
		  思路1：html      div元素
		        css     倒角，必须有边框
		思路2：html      div元素 #triangle
		      css         斜边
				          不设置宽高
						  左边框：50像素实线红色  transparent
						  右边框：50像素实线黄色  transparent
						  下边框：50像素实线蓝色、透明度 .3
						   颜色值：rgba（255,255,0）
		-->
		<style>
			/* 1.画圆  */
			div#circle{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				border-radius:100px 100px 100px 100px;
				/*  边框阴影属性 box-shadow属性 */
				box-shadow: 5px 5px 100px 0px red inset;
			}
			/* 2.正三角形 */
			div#triangle{
				width: 0;  
				/* border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid rgba(0, 0, 255, .3); */
				/* 两行：全部设置为透明色，上面的三角设置颜色 */
				border:50px solid transparent;
				border-top-color: rgba(0, 0, 255, .3);
			}
			input{
				outline: 1px solid red;
				outline: 0; /* 去掉边框效果，通配选择器中 */
			}
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
	</body>
</html>